<template>
    <div>
      <div>
        <input type="text" v-model="id"
               placeholder="请输入需要查询的用户id">
        <!--<a :href="`/#/User/${id}?a=a&b=b#123`">查询</a>-->
        <a href="javascript:;" @click="query">查询</a>
      </div>
      <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: "User",
        data(){
          return {
            id:""
          }
        },
        methods:{
          query(){
            // this.$router.push(`/User/${this.id}?a=a&b=b#123`)

            // 在使用编程式导航时 配置对象中的path和params不能同时出现
            // 要使用命名路由
            this.$router.push({
              // path:`/User`,
              name:"UserDetail",
              params:{
                id:this.id
              },
              query:{
                a:"a",
                b:"b"
              },
              hash:"#1237878787878"
            })
          }
        }
    }
</script>

<style scoped>
  a{
    display: inline-block;
    width: 40px;
    height: 25px;
    background: pink;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    font-size: 12px;

    text-decoration: none;
  }
</style>
